import px2vw from "@/theme/utils/px2vw";
import {bsc} from "viem/chains";
import {bscTestnet} from "@/config/chainds";
import {Flex, Stack, Box} from "@chakra-ui/react";
import React from "react";
import Text from "@/components/Text";

import Table, {Column} from "@/components/Table";
import {depositDetail, nftRewardList, withdrawRecord} from "@/apis/v2";
import {useConfigContext} from "@/context/ConfigContext";
import {useQuery} from "@tanstack/react-query";
import dayjs from "dayjs";
import FetchTemplate from "@/components/FetchTemplate";

import {formatValue} from "@/utils/common";
import {OperationHeader} from "./reward";
import BigNumber from "bignumber.js";
import {isDev} from "@/utils/request";

const columns: Column[] = [
    {
        dataIndex: "amount",
        title: "数量",
        width: px2vw(100),
        render: (record) => {
            return (
                <Text fontSize="12px" textAlign="left">
                    {record.amount}
                </Text>
            );
        },
    },
    {
        dataIndex: "status",
        title: "状态",
        width: px2vw(60),
        render: (record) => {
            return (
                <Text fontSize="12px" textAlign="left">
                    {record.status == 0 ? "待确认" : "已完成"}
                </Text>
            );
        },
    },
    {
        dataIndex: "createTime",
        title: "交易时间",
        width: px2vw(160),
    }
];

function Index() {
  const { address } = useConfigContext();

  const tableData = useQuery(
    ["withdrawRecord", address],
    async () => {
        const res = await withdrawRecord(address as `0x${string}`);
        return res.data;
    },
    {
      enabled: !!address,
    }
  );

  return (
    <Flex flexDirection="column" px={px2vw(20)} alignItems="center">
      <OperationHeader route="/personal" title="领取记录" />
      <Box marginTop={px2vw(40)}>
        <FetchTemplate
          loading={tableData.isLoading}
          empty={tableData?.data?.length == 0}
        >
          <Table data={tableData.data || []} columns={columns} />
        </FetchTemplate>
      </Box>
    </Flex>
  );
}

export default Index;
